<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商家管理</el-breadcrumb-item>
      <el-breadcrumb-item>审核列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <!--工具条-->
        <el-form
          :inline="true"
          :model="queryinfo"
          class="toolbar"
          label-position="right"
          label-width="80px"
        >
          <el-row>
            <el-form-item label="手机号">
              <el-input v-model="queryinfo.queryString" maxlength="11"></el-input>
            </el-form-item>
            <!-- <el-form-item label="订单编号">
              <el-input v-model="queryinfo.queryString"></el-input>
            </el-form-item>-->
            <el-form-item label="订单状态">
              <el-select v-model="queryinfo.queryType" placeholder="请选择" clearable>
                <el-option
                  v-for="item in isAgainOrder"
                  :label="item.name"
                  :key="item.status"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label>
              <el-button @click="searchOrderInfo" type="primary" size="medium">查询</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table :data="orderlist" style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column label="门店名称" prop="sellName" width="100"></el-table-column>
          <el-table-column label="门店图片" width="100" prop="storePhoto">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height:60px;margin-bottom:15px;"
                :src="scope.row.storePhoto"
                :preview-src-list="[scope.row.storePhoto]"
              ></el-image>
              <!-- <el-popover placement="right" width="400" trigger="click">
                
                <div style="display:flex;align-items:center;justify-content:center;">
                  <img :src="scope.row.storePhoto" alt style="width:20rem;height:auto;" />
                </div>

                <el-button type="primary" size="mini" slot="reference">点击查看</el-button>
              </el-popover> -->
            </template>
          </el-table-column>
          <!-- prop="storePhoto"-->
          <el-table-column label="营业执照" width="100">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height:60px;margin-bottom:15px;"
                :src="scope.row.businessLicense"
                :preview-src-list="[scope.row.businessLicense]"
              ></el-image>
              <!-- <el-popover placement="right" width="400" trigger="click">
                <div
                  style="display:flex;align-items:center;justify-content:center;overscroll:scroll;"
                >
                  <img :src="scope.row.businessLicense" alt style="width:20rem;height:auto;" />
                </div>

                <el-button type="primary" size="mini" slot="reference">点击查看</el-button>
              </el-popover> -->
            </template>
          </el-table-column>
          <!-- prop="businessLicense"-->
          <el-table-column label="门店地址" prop="realAddr" width="120"></el-table-column>

          <el-table-column label="联系方式" prop="contact" width="100"></el-table-column>
          <el-table-column label="营业时间" prop="businessHours" width="100"></el-table-column>
          <el-table-column label="行业分类" prop="businessClass" width="80"></el-table-column>
          <el-table-column label="申请状态" prop="status">
            <template slot-scope="scope">
              <div
                style
              >{{scope.row.status==0?"审核中":scope.row.status==1?"审核通过":scope.row.status==-1?"已拒绝":scope.row.status==2?"初审通过":scope.row.status==5?"待复审":scope.row.status==6?"复审失败":""}}</div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <!-- <el-table-cloumn label="操作">{{status}}</el-table-cloumn> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="getBuquanInfo(scope)"
                v-if="scope.row.status==5 || scope.row.status==6"
              >查看补全信息</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="confirmReplay(scope)"
                v-if="scope.row.status==0"
              >同意</el-button>
              <el-button
                type="danger"
                size="mini"
                @click="refuseReplay(scope)"
                v-if="scope.row.status==0"
              >拒绝</el-button>
            </template>
            <!-- <template slot-scope="scope" v-if="scope.row.status==0">
              <el-button type="primary" size="mini" @click="confirmReplay(scope)">同意</el-button>
              <el-button type="danger" size="mini" @click="refuseReplay(scope)">拒绝</el-button>
            </template>-->
          </el-table-column>
          <!-- <el-table-column label="操作" v-if="status==0">
            <template slot-scope="scope" v-if="scope.row.status==5 || scope.row.status==6">
              <el-button type="primary" size="mini" @click="getBuquanInfo(scope)">查看补全信息</el-button>
            </template>
            <template slot-scope="scope" v-if="scope.row.status==0">
              <el-button type="primary" size="mini" @click="confirmReplay(scope)">同意</el-button>
              <el-button type="danger" size="mini" @click="refuseReplay(scope)">拒绝</el-button>
            </template>
          </el-table-column>-->
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.pageNo"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryinfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </el-card>

    <el-dialog title="拒绝操作" :visible.sync="changDialogVisibleo" width="40%">
      <!-- 直接使用富文本编辑器，把 它的内容，双向绑定到 addForm.goods_introduce 上 -->
      <quill-editor v-model="changForm.content" ref="myQuillEditor"></quill-editor>
      <!-- <el-form :model="changForm" label-position="left" label-width="100px" ref="changForm">
        <el-form-item label="拒绝原因" prop="content">
          <el-input v-model="changForm.content" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="changDialogVisibleo=false">取 消</el-button>
        <el-button type="primary" @click="changFormSubmit" :loading="addFormLoading">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看补全信息" :visible.sync="buquanBtn" width="50%">
      <div>
        <div>
          <div class="base-flex-between base-border">
            <div class="name-color">公司名称</div>
            <div>{{dataInfo.companyName}}</div> 
          </div>
          <el-input
            v-model="refuseFormData.companyName"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div class="base-flex-between base-border">
            <div class="name-color">公司注册地址</div>
            <div>{{dataInfo.companyAddr}}</div>
          </div>
          <el-input
            v-model="refuseFormData.companyAddr"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div class="base-flex-between base-border">
            <div class="name-color">联系人姓名</div>
            <div>{{dataInfo.linkName}}</div>
          </div>
          <el-input
            v-model="refuseFormData.linkName"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div class="base-flex-between base-border">
            <div class="name-color">联系方式</div>
            <div>{{dataInfo.linkMobile}}</div>
          </div>
          <el-input
            v-model="refuseFormData.linkMobile"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div class="base-flex-between base-border">
            <div class="name-color">营业执照注册号</div>
            <div>{{dataInfo.businessLicenseNum}}</div>
          </div>
          <el-input
            v-model="refuseFormData.businessLicenseNum"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div class="base-flex-between base-border">
            <div class="name-color">法定代表人</div>
            <div>{{dataInfo.officialPerson}}</div>
          </div>
          <el-input
            v-model="refuseFormData.officialPerson"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div class="base-flex-between base-border">
            <div class="name-color">法人身份证号码</div>
            <div>{{dataInfo.officialPersonCode}}</div>
          </div>
          <el-input
            v-model="refuseFormData.officialPersonCode"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <div class="base-flex-between base-border">
            <div class="name-color">收款人姓名</div>
            <div>{{dataInfo.payBankName}}</div>
          </div>
          <el-input
            v-model="refuseFormData.payBankName"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>
          <!-- <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList"></el-image> -->
          <div class="base-flex-between base-border">
            <div class="name-color">收款人账号</div>
            <div>{{dataInfo.payBankNum}}</div>
          </div>

          <el-input
            v-model="refuseFormData.payBankNum"
            placeholder="请输入拒绝原因"
            v-if="maskType==2"
            style="margin-bottom:10px;"
          ></el-input>

          <div class="base-border"
            style="display:flex;justify-content:space-between;margin-bottom:20px;"
            v-if="dataInfo.sfzImg"
          >
            <div class="name-color">身份证图片信息</div>
            <div
              style="width:16rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;"
            >
              <el-image
                style="width: 60px; height:60px;margin-bottom:15px;"
                v-for="(item,i) in dataInfo.sfzImg"
                :key="i"
                :src="item"
                :preview-src-list="dataInfo.sfzImg"
              ></el-image>
            </div>
          </div>
          <div
            style="display:flex;align-items:center;flex-wrap:wrap;"
          >
            <el-input
              v-model="item.title"
              placeholder="请输入拒绝原因"
              v-if="maskType==2"
              v-for="(item,i) in sfzAuditInfo"
              :key="i"
              style="margin-bottom:10px;width:10rem;margin-right:15px;"
            ></el-input>
          </div>
          <div class="base-border"
            style="display:flex;justify-content:space-between;margin-bottom:20px;"
            v-if="dataInfo.companyAgreementImg"
          >
            <div class="name-color">合同电子版照片</div>
            <div
              style="width:18rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;"
            >
              <el-image
                style="width: 60px; height:60px;margin-bottom:15px;"
                v-for="(item,i) in dataInfo.companyAgreementImg"
                :key="i"
                :src="item"
                :preview-src-list="dataInfo.companyAgreementImg"
              ></el-image>
            </div>
          </div>

          <div style="display:flex;align-items:center;flex-wrap:wrap;">
            <el-input
              v-model="item.title"
              placeholder="请输入拒绝原因"
              v-if="maskType==2"
              v-for="(item,i) in contractAuditInfo"
              :key="i"
              style="margin-bottom:10px;width:10rem;margin-right:15px;"
            ></el-input>
          </div>
          <!-- <div class="base-flex-between">
          <div>合同电子版照片</div>
          <div>{{dataInfo.payBankNum}}</div>
          </div>-->
        </div>
        <div slot="footer" class="dialog-footer" v-if="dataInfo.status==5">
          <div>
            <el-button @click="buquanConfirmSub(0)">拒绝</el-button>
            <el-button type="primary" @click="buquanConfirmSub(1)" :loading="addFormLoading">同意</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isAgainOrder: [
        {
          name: "请选择",
          status: "",
        },
        {
          name: "审核中",
          status: 0,
        },
        // {
        //   name: "审核通过",
        //   status: 1
        // },
        {
          name: "初审通过",
          status: 2,
        },
        {
          name: "已拒绝",
          status: -1,
        },
      ],
      queryinfo: {
        queryString: "",
        queryType: "", //-1 商户被封 0 审核中 1审核通过
        pageNo: 1,
        pageSize: 10,
      },
      orderlist: [],
      total: "",
      changForm: {
        content: "",
      },
      changDialogVisibleo: false,
      dialogVisible: true,
      sindex: null,
      dataInfo: {},
      form: {
        token: "", //七牛token
        Url: "", //获取上传路径
        domain: "", //上传路径 二级
      },
      buquanBtn: false,
      maskType: 1,
      refuseFormData: {
        companyName: "", //公司名称
        companyAddr: "", //公司地址
        businessLicenseNum: "", //营业执照注册号
        officialPerson: "", //法务代表人
        officialPersonCode: "", //法人身份证号
        linkMobile: "", //联系方式
        linkName: "", //联系人姓名
        payBankName: "", //收款账号名称
        payBankNum: "", //收款手机账号
        sfzImg: "",
        companyAgreementImg: "",
      },
      sfzAuditInfo: [],
      contractAuditInfo: [],
    };
  },
  created() {
    this.getOrderList();
    this.getQnToken();
  },
  methods: {
    buquanConfirmSub(type) {
      //type 0 拒绝 1同意
      if (type == 0) {
        if (this.maskType == 1) {
          this.maskType = 2;
        } else {
          this.$confirm("是否拒绝商家入驻补全信息审核", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              console.log("点击同意");
              let params = this.dataInfo;
              params.status = 6;
              params.companyAgreementImg = JSON.stringify(
                params.companyAgreementImg
              );
              params.sfzImg = JSON.stringify(params.sfzImg);
              if (this.sfzAuditInfo.length > 0) {
                let dataOne = [];
                this.sfzAuditInfo.forEach((item) => {
                  dataOne.push(item.title);
                });
                this.refuseFormData.sfzImg = JSON.stringify(dataOne);
              }
              if (this.contractAuditInfo.length > 0) {
                let dataTwo = [];
                this.contractAuditInfo.forEach((item) => {
                  dataTwo.push(item.title);
                });
                this.refuseFormData.companyAgreementImg = JSON.stringify(
                  dataTwo
                );
              }
              params.verifyInfo = JSON.stringify(this.refuseFormData);
              this.$http.post("/manage/mall/editSeller", params).then((res) => {
                this.buquanBtn = false;
                this.orderlist[this.sindex].status = params.status;
                this.$message({
                  message: "已拒绝",
                  type: "success",
                });
              });
            })
            .catch(() => {});
        }
      } else {
        this.$confirm("是否同意商家入驻补全信息审核", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = this.dataInfo;
            params.companyAgreementImg = JSON.stringify(
              params.companyAgreementImg
            );
            params.sfzImg = JSON.stringify(params.sfzImg);
            params.status = 1;
            this.$http.post("/manage/mall/editSeller", params).then((res) => {
              this.buquanBtn = false;
              this.orderlist[this.sindex].status = params.status;
              this.$message({
                message: "已同意",
                type: "success",
              });
            });
          })
          .catch(() => {});
      }
    },
    getBuquanInfo(data) {
      this.sindex = data.$index;
      //console.log(data);
      console.log(typeof data.row.sfzImg);
      this.maskType = 1;
      if (typeof data.row.sfzImg == "string") {
        data.row.sfzImg = JSON.parse(data.row.sfzImg);
        data.row.sfzImg.forEach((element) => {
          let obj = {
            title: "",
          };
          this.sfzAuditInfo.push(obj);
        });
      }
      if (typeof data.row.companyAgreementImg == "string") {
        data.row.companyAgreementImg = JSON.parse(data.row.companyAgreementImg);
        data.row.companyAgreementImg.forEach((element) => {
          let obj = {
            title: "",
          };
          this.contractAuditInfo.push(obj);
        });
      }

      this.refuseFormData={
        companyName: "", //公司名称
        companyAddr: "", //公司地址
        businessLicenseNum: "", //营业执照注册号
        officialPerson: "", //法务代表人
        officialPersonCode: "", //法人身份证号
        linkMobile: "", //联系方式
        linkName: "", //联系人姓名
        payBankName: "", //收款账号名称
        payBankNum: "", //收款手机账号
        sfzImg: "",
        companyAgreementImg: "",
      }

      this.dataInfo = data.row;
      this.buquanBtn = true;
    },
    async getQnToken() {
      const { data: res } = await this.$http.post(
        "/manage/userFile/qiNiuUpload",
        {}
      );
      console.log(res.data.token);
      this.form.token = res.data.token;
      this.form.domain = res.data.domain;
      this.form.Url = res.data.upload_url;
    },
    handleSizeChange(e) {
      console.log(e);
      this.queryinfo.pageSize = e;
      this.getOrderList();
    },
    handleCurrentChange(newPage) {
      this.queryinfo.pageNo = newPage;
      this.getOrderList();
    },
    searchOrderInfo() {
      this.queryinfo.pageNo = 1;
      this.getOrderList();
    },
    trundown() {
      this.$confirm("请仔细确认是否拒绝该申诉, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/manage/otcOrder/changeReportFailure", {
              queryId: this.id,
            })
            .then((res) => {
              if (res.data.status == 1) {
                this.dialogTableVisible1 = false;
                this.getOrderList();
                this.$message({
                  type: "success",
                  message: "申诉已拒绝",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    consent() {
      this.$confirm("请仔细确认是否通过该申诉, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/manage/otcOrder/changeReportSuccess", {
              queryId: this.id,
            })
            .then((res) => {
              if (res.data.status == 1) {
                this.dialogTableVisible1 = false;
                this.getOrderList();
                this.$message({
                  type: "success",
                  message: "申诉已成功",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    getOrderList() {
      // if (this.queryinfo.queryId == "") {
      //   this.queryinfo.queryId = 0;
      // }
      this.$http.post("/manage/mall/sellerList", this.queryinfo).then((res) => {
        console.log("商家列表", res.data);
        this.orderlist = res.data.data.list;
        this.total = res.data.data.total;
      });
      //   if (this.queryinfo.queryId == "") {
      //     this.queryinfo.queryId = 0;
      //   }
      //   this.$http.post("/manage/otcOrder/list", this.queryinfo).then(res => {
      //     if (res.data.status == 1) {
      //       this.orderlist = res.data.data.list;
      //       this.total = res.data.data.total;

      //     }
      //   });
    },
    actionOrder(queryType, type) {
      if (type == 2) {
        queryType.verifyInfo = this.changForm.content;
      }
      console.log(queryType);
      this.$http.post("/manage/mall/editSeller", queryType).then((res) => {
        this.changDialogVisibleo = false;
        console.log(this.sindex);
        this.orderlist[this.sindex].status = queryType.status;
        this.$message({
          message: type == 1 ? "已同意" : "已拒绝",
          type: "success",
        });
      });
    },
    refuseReplay(data) {
      console.log(data);
      this.sindex = data.$index;
      let dataInfo = { ...data.row, status: -1 };
      this.dataInfo = dataInfo;
      this.changDialogVisibleo = true;
    },
    //同意
    confirmReplay(data) {
      this.sindex = data.$index;
      let dataInfo = { ...data.row, status: 1 };
      this.actionOrder(dataInfo, 1);
    },
    changFormSubmit() {
      if (!this.changForm.content) {
        this.$message.error("请输入拒绝原因");
        return;
      }
      let dataInfo = { ...this.dataInfo, status: -1 };
      this.actionOrder(dataInfo, 2);
    },
  },
};
</script>
<style lang="less" >
.itemUl {
  list-style-type: none;
}
.itemUl .itemli {
  max-width: 300px;
}
.demo-table-expand {
  font-size: 0;
  // height: 600px;
  background-color: rgb(243, 242, 242);
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.base-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
}
.name-color {
  color: #666666;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.base-border {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #eeeeee;
}
</style>
